/*
 * @ddescription: 完善账户弹窗
 * @Author: along
 * @Date: 2020-11-05
 * @Last Modified by: along
 * @Last Modified time: 2020-11-05
 */
<template>
    <div v-if="dialogTips">
        <el-dialog
            :visible="dialogTips"
            append-to-body
            width="360px"
            center
            :show-close="false"
            class="accountDialog"
        >
            <div class="wrap">
                <img
                    src="@/assets/image/waring.png"
                    class="accountDialog-logo"
                >
                <p class="accountDialog-title">
                    {{ account.alipay.status === 0 && account.wxpay.status === 0 ? '温馨提示' : '申请进度' }}
                </p>
                <div
                    class="zd-dialog-text"
                >
                    {{ account.alipay.status === 0 && account.wxpay.status === 0 ? '您的收款账户还没有绑定支付宝和微信结算中心,为了您的资金更加安全,请尽快绑定' : '请耐心等待，提交的账号需要微信和支付宝两个平台审核都通过才可以使用' }}
                </div>
                <div
                    class="zd-wrap"
                    v-if="account.alipay.status !== 0 || account.wxpay.status !== 0"
                >
                    <div class="zd-item">
                        支付宝进度:
                        <p class="item-content">
                            {{ account.alipay.status | filterAlipay }}
                        </p>
                    </div>
                    <div class="zd-item">
                        微信进度:
                        <p
                            class="item-content"
                            :style="{color: 'rgba(47, 189, 179, 1)'}"
                        >
                            {{ account.wxpay.status | filterWx }}
                        </p>
                    </div>
                </div>
                <div class="zd-dialog-foot">
                    <el-button
                        v-if="account.alipay.status !== 0 || account.wxpay.status !== 0"
                        type="primary"
                        size="medium"
                        @click="dialogTips = false"
                        style="width:180px"
                    >
                        知道了
                    </el-button>
                    <el-button
                        v-if="account.alipay.status === 0 && account.wxpay.status === 0"
                        type="default"
                        size="medium"
                        @click="dialogTips = false"
                        style="width:120px"
                    >
                        取消
                    </el-button>
                    <el-button
                        v-if="account.alipay.status === 0 && account.wxpay.status === 0"
                        type="primary"
                        size="medium"
                        style="margin-left: 24px;width:120px"
                        @click="fnHandlePage()"
                    >
                        去设置
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'AccountDialog',
    data () {
        return {
            dialogTips: false,
            account: {
                alipay: {
                    status: ''
                },
                wxpay: {
                    status: ''
                }
            }
        };
    },
    filters: {
        filterAlipay (val) {
            if(val == 0) return '待提交';
            if(val == 1) return '待审核';
            if(val == 2) return '待签约';
            if(val == 3) return '已完成';
            if(val == -1) return '已驳回';
        },
        filterWx (val) {
            if(val == 0) return '待提交';
            if(val == 1) return '待资料检验';
            if(val == 2) return '待验证账户';
            if(val == 3) return '待审核';
            if(val == 4) return '待签约';
            if(val == 5) return '已完成';
            if(val == -1) return '已驳回';
            if(val == -2) return '已冻结';
        }
    },
    computed: {
        ...mapState({})
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化数据
         */
        init () {
            this.$post('/Ecommerce/getApplyStatus', {}, resp => {
                if (resp.code == 1) {
                    this.account = {
                        ...resp.data
                    };
                }
            });
        },

        /**
         * @description 跳转账户设置
         */
        fnHandlePage () {
            this.close();
            this.$router.push({
                name: 'manage-market-account-setting'
            });
        },

        /**
         * @description 打开弹窗
         */
        show () {
            this.dialogTips = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogTips = false;
        }
    }
};
</script>

<style lang="less" scoped>
.zd-dialog-text {
    color: #666;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
}
.zd-dialog-foot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}
.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .accountDialog-logo {
        width: 48px;
        height: 48px;
    }
    .accountDialog-title {
       color: #333333;
       font-weight: 500;
       font-size: 16px;
       margin:  12px 0 20px 0;
    }
}
.zd-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .zd-item {
        display: flex;
        line-height: 14px;
        align-items: center;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        margin-top: 12px;
        .item-content {
            color: rgba(247, 144, 56, 1);
            font-weight: 500;
            margin-left: 10px;
        }
    }
}
</style>
<style lang="less">
.accountDialog {
    .el-dialog__header {
        display: none;
    }
}
</style>